<template>
  <div class="envAir">
    <div class="env_img_div">
      <div class="month_svg">
        <svg-icon :icon-class="month" class="monthFs"></svg-icon>
      </div>
      <img
        src="images/environment_img_picture@2x.png"
        class="envAir_img move backringt"
      />
    </div>
    <div class="ui_abs envAir_text move title">
      <yd-flexbox direction="vertical">
        <yd-flexbox-item class="new-flexbox-vertical">
          <!-- <yd-cell-item class="env_big">

                            <div slot="left" class="ui_fs56 ui_clr_1F1F44 ui_family_Medium ui_mr15"><b>环境</b></div>
                            <svg-icon icon-class="quetion" class="ui_fs40 ui_clr_758892" slot="right" @click="dialogshow"></svg-icon> 
                        </yd-cell-item> -->
          <div class="env_big">
            <span class="ui_fs56 ui_clr_1F1F44 ui_family_Medium ui_mr15"
              ><b>环境</b></span
            >
            <svg-icon
              icon-class="quetion"
              class="ui_fs40 ui_clr_758892"
              slot="right"
              @click="dialogshow"
            ></svg-icon>
          </div>
          <div class="info" v-show="isShowDistText">
            <p v-html="allShowText"></p>
          </div>
        </yd-flexbox-item>
      </yd-flexbox>
    </div>
    <div class="kuang absTitle">
      <div class="cicle_tu move title">
        <div
          class="ui_clr_1F1F44 ui_fs28 bingtuText ui_family_Medium"
          v-html="
            clickType == 1
              ? typeText.air
              : clickType == 2
              ? typeText.humidity
              : typeText.water
          "
        ></div>
        <!-- 柱状图开始 -->
        <div class="bingtu">
          <!-- <v-chart
            :forceFit="true"
            :height="height"
            :data="data"
            :scale="scale"
            :background="background"
            :padding="[0, 30, 0, 30]"
          >
            <v-pie
              position="percent"
              :color="color"
              :vStyle="pieStyle"
              :label="labelConfig"
            />

            <v-coord type="theta" :radius="0.5" :innerRadius="0.4" />
          </v-chart> -->
          <div class="chart">
            <canvas id="container" height="180" width="327"></canvas>
          </div>
        </div>

        <!-- 柱状图结束 -->
        <div
          class="absTitle bingtuTextLit ui_clr_1F1F44 ui_fs22"
          v-show="isShowDelDay"
        >
          本月有{{ showDelDay }}天未获取到数据
        </div>
      </div>
      <yd-flexbox class="tab ui_tac u_fb_ac2 ui_family_Medium">
        <yd-flexbox-item
          align="center"
          v-bind:class="{ active: clickType == 1 }"
          @click.native.stop.prevent="clickType = 1"
          >空气</yd-flexbox-item
        >
        <yd-flexbox-item
          align="center"
          v-bind:class="{ active: clickType == 2 }"
          @click.native.stop.prevent="clickType = 2"
          >湿度</yd-flexbox-item
        >
        <yd-flexbox-item
          align="center"
          v-bind:class="{ active: clickType == 3 }"
          @click.native.stop.prevent="clickType = 3"
          >水质</yd-flexbox-item
        >
      </yd-flexbox>
    </div>
  </div>
</template>

<script>
import F2 from '@antv/f2/lib/index-all'
import { htmlEncodeByRegExp } from '../../utils/util.js'
const DataSet = require('@antv/data-set')
const title = {
  position: 'bottom'
}
const color = [
  // "item",["#00CBBB","#FFAA10","#FF6A4C","#7C879B"]
  'item',
  function(type) {
    var color = void 0
    if (type === '优' || type === 'TDS低' || type === '适宜') color = '#00CBBB'
    if (type === '良' || type === 'TDS较低' || type === '潮湿')
      color = '#FFAA10'
    if (type === 'TDS较高') color = '#FF8225'
    if (type === '差' || type === 'TDS高' || type === '干燥') color = '#FF6A4C'
    if (type === '无数据') color = '#7C879B'

    return color
  }
]
const scale = [
  {
    dataKey: 'percent',
    min: 0,
    formatter: '.0%'
  }
]
const background = {
  // stroke:'#00CBBB', // 边框颜色
  // lineWidth:10, // 边框宽度
  //  fill:"#00CBBB",
  fillOpactiy: 0
  // radius:10
}
// 小图区域
// const plotBackground = {
//   stroke:'#00CBBB', // 边框颜色
//   lineWidth:10, // 边框宽度
// }
function iseq5() {
  // let userAgent = window.navigator.userAgent
  // let devicePixelRatio = window.devicePixelRatio
  let width = window.screen.width
  let height = window.screen.height
  if (height == 568 && width == 320) {
    // console.log("iPhone5");
    return true
  } else {
    return false
  }
}
import confirm2 from '@/components/confirm'
export default {
  created() {
    this.height = iseq5() ? 150 : 180
  },
  props: {
    month: { type: String },
    envBestType: {
      type: Object,
      required: true,
      default: {
        air: {
          maxPercent: 0
        },
        humidity: {
          maxPercent: 0
        },
        water: {
          maxPercent: 0
        }
      }
    }
  },
  data() {
    return {
      datetime3: '2016-06',
      data: null,
      scale,
      color,
      title,
      background,
      // plotBackground,
      height: 180,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      },
      labelConfig: [
        // "percent",
        // {
        //   formatter: (val, item) => {
        //     return item.point.item + ": " + val;
        //   }
        // }
        'count',
        {
          formatter: (val, item) => {
            return item.point.item + ': ' + val + '天'
          }
        }
      ],
      clickType: 1,
      isShowDelDay: false,
      showDelDay: 0,
      isShowDistText: false, // 对应的是否显示

      showWaterText: '',
      isShowWaterText: false, // 水质是否异常
      isShowAirText: false, // 空气是否异常
      showAirText: '',
      showHumText: '',
      isShowHumText: false, // 湿度是否异常
      allShowText: ''
    }
  },
  watch: {
    clickType(newVal) {
      this.delDayFun(newVal)
      this.bingtu(newVal)
    },
    // envBestType() {
    //   // 異常文案的邏輯
    //   this.abNormal();
    //   this.bingtu(1);

    // }
    envBestType: {
      handler() {
        // 異常文案的邏輯
        this.abNormal()
        this.clickType = 1
        this.bingtu(1)
        this.delDayFun(1)
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    // 框框内的文案。
    typeText() {
      let env = {
        air: [
          `<b>您周边的空气质量情况超越了${this.envBestType.air.maxPercent}%的用户</b>`,
          `<b>您家室内的空气质量情况超越了${this.envBestType.air.maxPercent}%的用户</b>`
        ],
        humidity: [
          `<b>您附近的湿度情况超越了${this.envBestType.humidity.maxPercent}%的用户</b>`,
          `<b>您家室内的湿度情况超越了${this.envBestType.humidity.maxPercent}%的用户</b>`
        ],
        water: [
          `<b>您周边的水质情况超越了${this.envBestType.water.maxPercent}%的用户</b>`,
          `<b>您家的水质情况超越了${this.envBestType.water.maxPercent}%的用户</b>`
        ]
      }

      let air = this.envBestType.air && this.envBestType.air.hasSb
      let humidity =
        this.envBestType.humidity && this.envBestType.humidity.hasSb
      let water = this.envBestType.water && this.envBestType.water.hasSb

      return {
        air: env.air[air],
        humidity: env.humidity[humidity],
        water: env.water[water]
      }
    }
  },
  methods: {
    delDayFun(newVal) {
      if (newVal == 1) {
        // 空气对应的缺失天气，以及异常文案显示
        if (this.envBestType.air.delDay != 0) {
          this.isShowDelDay = true
          this.showDelDay = this.envBestType.air.delDay
        } else {
          this.isShowDelDay = false
        }
        if (this.showAirText) {
          this.allShowText = this.showAirText
          this.isShowDistText = true
        } else {
          this.isShowDistText = false
        }
      } else if (newVal == 2) {
        // 湿度对应的缺失天气，以及异常文案显示
        if (this.envBestType.humidity.delDay != 0) {
          this.isShowDelDay = true
          this.showDelDay = this.envBestType.humidity.delDay
        } else {
          this.isShowDelDay = false
        }
        if (this.showHumText) {
          this.allShowText = this.showHumText
          this.isShowDistText = true
        } else {
          this.isShowDistText = false
        }
      } else if (newVal == 3) {
        // 水质对应的缺失天气，以及异常文案显示
        if (this.envBestType.water.delDay != 0) {
          this.isShowDelDay = true
          this.showDelDay = this.envBestType.water.delDay
        } else {
          this.isShowDelDay = false
        }
        if (this.showWaterText) {
          this.allShowText = this.showWaterText
          this.isShowDistText = true
        } else {
          this.isShowDistText = false
        }
      }
    },
    // viser 饼图
    // bingtu(clickType) {
    //   //   const sourceData = [
    //   //     { item: "优", count: 40 },
    //   //     { item: "良", count: 21 },
    //   //     { item: "差", count: 17 },
    //   //     { item: "无数据", count: 13 }
    //   //   ];
    //   let sourceData =
    //     clickType == 1
    //       ? this.tsfAir_bingtu()
    //       : clickType == 2
    //       ? this.tsfHum_bingtu()
    //       : this.tsfWater_bingtu()

    //   const dv = new DataSet.View().source(sourceData)
    //   dv.transform({
    //     type: 'percent',
    //     field: 'count', //是统计发生的字段（求和，求百分比）
    //     dimension: 'item', //也就是"每个不同的 dimension 下，field 值占总和的百分比
    //     as: 'percent' // 结果存储在 percent 字段
    //   })
    //   this.data = dv.rows
    // },
    // f2 饼图
    bingtu(clickType) {
      //   const sourceData = [
      //     { item: "优", count: 40 },
      //     { item: "良", count: 21 },
      //     { item: "差", count: 17 },
      //     { item: "无数据", count: 13 }
      //   ];
      let sourceData =
        clickType == 1
          ? this.tsfAir_bingtu()
          : clickType == 2
          ? this.tsfHum_bingtu()
          : this.tsfWater_bingtu()

      this.data = sourceData
      // const dv = new DataSet.View().source(sourceData)
      // dv.transform({
      //   type: 'percent',
      //   field: 'count', //是统计发生的字段（求和，求百分比）
      //   dimension: 'item', //也就是"每个不同的 dimension 下，field 值占总和的百分比
      //   as: 'percent' // 结果存储在 percent 字段
      // })

      // this.data = dv.rows
      var chart = new F2.Chart({
        id: 'container',
        pixelRatio: window.devicePixelRatio
      })

      chart.source(sourceData)
      chart.coord('polar', {
        transposed: true,
        innerRadius: 0.55,
        radius: 0.75
      })
      chart.axis(false)
      chart.legend(false)
      chart.tooltip(false)
      chart.guide().html({
        position: ['50%', '50%'],
        html:
          '<div style="width: 100px;height: 20px;text-align: center;line-height: 20px;" id="textContent"></div>'
      })
      // 配置文本饼图
      chart.pieLabel({
        sidePadding: 75,
        label1: function label1(sourceData) {
          return {
            text: sourceData.item,
            fill: '#000000',
            fontSize: 12
          }
        },
        label2: function label2(sourceData) {
          return {
            fill: '#808080',
            text: sourceData.count + '天',
            fontWeight: 500,
            fontSize: 10
          }
        }
      })
      chart
        .interval()
        .position('const*count')
        .color('item', function(type) {
          var color = void 0
          if (type === '优' || type === 'TDS低' || type === '适宜')
            color = '#00CBBB'
          if (type === '良' || type === 'TDS较低' || type === '潮湿')
            color = '#FFAA10'
          if (type === 'TDS较高') color = '#FF8225'
          if (type === '差' || type === 'TDS高' || type === '干燥')
            color = '#FF6A4C'
          if (type === '无数据') color = '#7C879B'

          return color
        })
        .adjust('stack')
      chart.render()

      chart.get('canvas').draw()
    },
    // todo
    dialogshow() {
      const s1 = htmlEncodeByRegExp(
        '统计室内外的空气PM2.5数据，PM2.5<35ug/m3为优，35ug/m3<PM2.5<70ug/m3为良，PM2.5<100ug/m3；'
      ).replace(/m3/g, 'm<sup>3</sup>')
      const s2 = htmlEncodeByRegExp(
        '统计室内外的相对湿度数据，相对湿度<40%时，人的感观为“干燥”，40%=<相对湿度<=60%,人的感观为适宜，相对湿度>60%时，会觉得潮湿；'
      )
      const s3 = htmlEncodeByRegExp(
        '统计水中的TDS含量，TDS是水中溶解性固体总量，建议少喝TDS值过高（大于100）的水；'
      )
      this.$Yd_dialog.confirm2({
        title: '<div class="yd_dialog_title2 u_c ui_fs34">环境tips</div>',
        mes:
          '<div class="popTitle ui_fw_600">空气质量</div><p class="popTitle_lit">' +
          s1 +
          '</p>' +
          '<div class="popTitle ui_fw_600">湿度</div><p class="popTitle_lit">' +
          s2 +
          '</p>' +
          '<div class="popTitle ui_fw_600">水质</div><p class="popTitle_lit">' +
          s3 +
          '</p>',
        btn: {
          html: '<div class="my_yd_confirmbtn">我知道了</div>',
          stay: false, //是否保留提示框
          callback: () => {} //按钮回调函数
        }
      })
    },
    //異常時的文案
    abNormal() {
      let env = {
        air: {
          hasSb: `空气质量较差时，请使用&nbsp;<b class="ui_fs32">空气净化器</b>&nbsp;净化空气；`,
          noSb: `附近的空气质量较差时，可使用&nbsp;<b class="ui_fs32">空气净化器</b>&nbsp;净化空气，您周边已有<b class="ui_fs32">&nbsp;${this.envBestType.air.fcNum.value}&nbsp;</b>位用户使用&nbsp;<b class="ui_fs32">美的净化器</b>&nbsp;将室内空气质量改善为&nbsp;<b class="ui_fs32">优</b>`
        },
        humidity: {
          hasSb: `室内&nbsp;<b class="ui_fs32">干燥</b>&nbsp;时请开启&nbsp;<b class="ui_fs32">加湿器</b>&nbsp;提高室内空气湿度；室内&nbsp;<b class="ui_fs32">潮湿</b>&nbsp;时，请打开&nbsp;<b class="ui_fs32">除湿器</b>&nbsp;，也可开启&nbsp;<b class="ui_fs32">空调的抽湿功能</b>&nbsp;或&nbsp;<b class="ui_fs32">开窗通风</b>&nbsp;`,
          noSb: {
            humAndDry: `附近的&nbsp;<b class="ui_fs32">湿度较低</b>&nbsp;时，可以使用&nbsp;<b class="ui_fs32">加湿器</b>&nbsp;提高室内空气湿度；附近的<b class="ui_fs32">&nbsp;湿度较高&nbsp;</b>时，请打开<b class="ui_fs32">&nbsp;除湿器&nbsp;</b>，也可<b class="ui_fs32">&nbsp;开启空调的抽湿功能&nbsp;</b>或<b class="ui_fs32">&nbsp;开窗通风&nbsp;</b>`,
            dry: `附近的<b class="ui_fs32">&nbsp;湿度较低&nbsp;</b>时，请开启<b class="ui_fs32">&nbsp;加湿器&nbsp;</b>提高室内空气湿度，您周边已有<b class="ui_fs32">&nbsp;${this.envBestType.humidity.fdNum.valuer}&nbsp;</b>用户使用加湿器将湿度改善为<b class="ui_fs32">&nbsp;适宜&nbsp;</b>`
          }
        },
        water: {
          hasSb: `TDS值<b class="ui_fs32">&nbsp;较高&nbsp;</b>时，请查看净饮设备的<b class="ui_fs32">&nbsp;滤芯是否需要更换&nbsp;</b>`,
          noSb: `TDS值<b class="ui_fs32">&nbsp;较高&nbsp;</b>时，请使用<b class="ui_fs32">&nbsp;美的净饮设备&nbsp;</b>改善您的水质；您周边已有<b class="ui_fs32">&nbsp;${this.envBestType.water.edNum.value}&nbsp;</b>用户使用净饮设备将TDS改善为较<b class="ui_fs32">&nbsp;低&nbsp;</b>`
        }
      }
      //空气有异常的时候 --- 空气质量差的天数大于1；
      if (this.envBestType.air.hasSb == 1) {
        // 有设备的情况
        if (Number(this.envBestType.air.devcPmCDays.value) >= 1) {
          this.showAirText = env.air.hasSb
          this.isShowAirText = true
          // this.$emit('isBad',{type:'air'})
        }
      } else {
        // 无设备的情况
        if (Number(this.envBestType.air.weatPmCDays.value) >= 1) {
          this.showAirText = env.air.noSb
          this.isShowAirText = true
          // this.$emit('isBad',{type:'air'})
        }
      }

      // 湿度有设备的异常
      if (this.envBestType.humidity.hasSb == 1) {
        if (
          Number(this.envBestType.humidity.devcHumADays.value) >= 1 ||
          Number(this.envBestType.humidity.devcHumBDays.value) >= 1
        ) {
          this.showHumText = env.humidity.hasSb
          this.isShowHumText = true
          // this.$emit('isBad',{type:'humidity'})
        }
        // 湿度无设备的异常
      } else {
        //湿度 异常1：只要有一天，潮湿and干燥均有
        if (
          Number(this.envBestType.humidity.weatHumADays.value) >= 1 &&
          Number(this.envBestType.humidity.weatHumBDays.value) >= 1
        ) {
          this.showHumText = env.humidity.noSb.humAndDry
          this.isShowHumText = true
        } else if (Number(this.envBestType.humidity.weatHumBDays.value) >= 1) {
          // 湿度异常2：
          this.showHumText = env.humidity.noSb.dry
          this.isShowHumText = true
        }
        // 这里是给建议页用的数据，免得再建议又计算一次。
        if (
          Number(this.envBestType.humidity.weatHumADays.value) >= 1 ||
          Number(this.envBestType.humidity.weatHumBDays.value) >= 1
        ) {
          // this.$emit('isBad',{type:'humidity'})
        }
      }
      // 水质的异常计算：
      if (this.envBestType.air.hasSb == 1) {
        // 有设备的情况-- 室内水质 DTS 高或较高显示文案
        if (
          Number(this.envBestType.water.devcOutdsBDays.value) >= 1 ||
          Number(this.envBestType.water.devcOutdsCDays.value) >= 1
        ) {
          this.showWaterText = env.water.hasSb
          this.isShowWaterText = true
          // this.$emit('isBad',{type:'water'})
        }
      } else {
        // 无设备的情况--周彪水质 DTS 高或较高显示文案
        if (
          Number(this.envBestType.water.devcIntdsBDays.value) >= 1 ||
          Number(this.envBestType.water.devcIntdsCDays.value) >= 1
        ) {
          this.showWaterText = env.water.noSb
          this.isShowWaterText = true
          // this.$emit('isBad',{type:'water'})
        }
      }
      // 初始化：空气的状态：
      this.allShowText = this.showAirText
      this.isShowDistText = this.isShowAirText
    },
    // 空气的饼图绘制
    tsfAir_bingtu() {
      const air = this.envBestType.air

      // 空氣室內
      let airDevData = [
        { item: '优', count: air.devcPmADays.value },
        { item: '良', count: air.devcPmBDays.value },
        { item: '差', count: air.devcPmCDays.value },
        { item: '无数据', count: air.devcPmDelDays.value }
      ]
      // 空氣室外
      let airWeatData = [
        { item: '优', count: air.weatPmYDays.value },
        { item: '良', count: air.weatPmLDays.value },
        { item: '差', count: air.weatPmCDays.value },
        { item: '无数据', count: air.weatPmDelDays.value }
      ]
      // console.log('ddddddddddddd', airWeatData)
      if (air.hasSb == 1) {
        airDevData = airDevData.filter(this.filter)
        airDevData = airDevData.map(this.tsfNumber)
        return airDevData
      } else {
        airWeatData = airWeatData.filter(this.filter)
        airWeatData = airWeatData.map(this.tsfNumber)
        return airWeatData
      }
    },
    //计算 湿度的 饼图数据
    tsfHum_bingtu() {
      const hum = this.envBestType.humidity
      let humDevData = [
        { item: '适宜', count: hum.devcHumSDays.value },
        { item: '潮湿', count: hum.devcHumADays.value },
        { item: '干燥', count: hum.devcHumBDays.value },
        { item: '无数据', count: hum.devcHumDelDays.value }
      ]
      // 湿度室外
      let humWeatData = [
        { item: '适宜', count: hum.weatHumSDays.value },
        { item: '潮湿', count: hum.weatHumADays.value },
        { item: '干燥', count: hum.weatHumBDays.value },
        { item: '无数据', count: hum.weatHumDelDays.value }
      ]
      if (hum.hasSb == 1) {
        humDevData = humDevData.filter(this.filter)
        humDevData = humDevData.map(this.tsfNumber)
        return humDevData
      } else {
        humWeatData = humWeatData.filter(this.filter)
        humWeatData = humWeatData.map(this.tsfNumber)
        return humWeatData
      }
    },
    // 水质的饼图绘制
    tsfWater_bingtu() {
      const water = this.envBestType.water

      let waterDevData = [
        { item: 'TDS低', count: water.devcOutdsSDays.value },
        { item: 'TDS较低', count: water.devcOutdsADays.value },
        { item: 'TDS高', count: water.devcOutdsCDays.value },
        { item: 'TDS较高', count: water.devcOutdsBDays.value }
      ]
      // 空氣室外
      let waterWeatData = [
        { item: 'TDS低', count: water.devcIntdsSDays.value },
        { item: 'TDS较低', count: water.devcIntdsADays.value },
        { item: 'TDS高', count: water.devcIntdsCDays.value },
        { item: 'TDS较高', count: water.devcIntdsBDays.value }
      ]
      if (water.hasSb == 1) {
        waterDevData = waterDevData.filter(this.filter)
        waterDevData = waterDevData.map(this.tsfNumber)
        return waterDevData
      } else {
        waterWeatData = waterWeatData.filter(this.filter)
        waterWeatData = waterWeatData.map(this.tsfNumber)
        return waterWeatData
      }
    },
    filter(item) {
      return item && item.count != 0
    },
    tsfNumber(item) {
      item.count = parseFloat(item.count)
      return item
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.move1 .title {
  animation-name: fadeIn;
  // opacity: 1;
}
.move1 .backringt {
  // animation-name: bounceInRight;
  animation-duration: 1s;
  animation-name: fadeInTopRight;
}
.monthFs {
  font-size: 480px; /*px*/
  position: absolute;
  top: 64px;
  left: 18px;
  width: 304px;
  height: 176px;
  //   font-size: 128px;
}
.envAir {
  position: relative;
  height: 100%;
  overflow: hidden;
  background-image: linear-gradient(#e8fdfd, #b3f0f2);
}
.envAir /deep/ .yd-cell {
  background-color: inherit;
}
.absTitle {
  position: absolute;
}
.tit {
  left: 48px;
  top: 164px;
}
.littleText {
  left: 48px;
  top: 260px;
}
.envAir /deep/ .yd-cell-right {
  min-height: 100%;
}
.envAir /deep/ .yd-datetime-input {
  min-height: 100%;
}
.envAir /deep/ .yd-cell-item:not(:last-child):after {
  height: 0;
}
.env_img_div {
  position: relative;
}
.envAir_img {
  width: 696px;
  height: 528px;
  position: absolute;
  display: inline-block;
  left: 12px;
  top: 10px;
  // transform:translate(-50%);
}
.envAir_text {
  // top: 324px;
  padding-left: 40px;
  top: 50%;
  transform: translate(0, -100%);
  margin-top: -80px;
}

.kuang {
  left: 50%;
  transform: translate(-50%);
  // top: 590px;
  top: 50%;
  margin-top: -40px;
  width: 654px;
  height: 482px;
  // height: 240px;/*no*/
}
.cicle_tu {
  background-image: url('../../assets/image/environment_img_data_bg@2x.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  width: 654px;
  height: 482px;
  // height: 240px;
  // top: 50%;
  // margin-top:30px;
  box-sizing: border-box;
}
.bingtuText {
  position: absolute;
  padding-top: 36px;
  padding-left: 40px;
  padding-right: 40px;
  line-height: 40px;
}
.bingtuTextLit {
  bottom: 30px;
  left: 40px;
  opacity: 0.5;
}
.bingtu {
  position: absolute;
  top: 80px;
  width: 100%;
  height: 80%;
  // margin-left: -50px;
  // margin-top: 180px;
}
.tab {
  height: 64px;
  width: 456px;
  margin: 0 auto;
  border: 2px solid #1f1f44;
  border-radius: 32px;
  margin-top: 60px;
  z-index: 99;
}
.tab div {
  line-height: 64px;
}
.tab div:first-child {
  border-radius: 32px 0px 0px 32px;
}
.tab div:last-child {
  border-radius: 0px 32px 32px 0px;
}
.tab div:not(:last-child) {
  border-right: 1px solid #1f1f44;
}
.tab .active {
  background-color: #1f1f44;
  color: #fff;
}
</style>
